<template>
	<!-- 话题详情 -->
	<view class="fill-base pages-home" v-if="detail.id">

		<!-- <banner :list="detail.imgs" :margin="0" :autoplay="true" :height="562" :indicatorActiveColor="primaryColor">
		</banner> -->
		<view class="fill-base pd-lg">
			<view class="list-item3 pd-lg mb-md mr-md fill-base radius-16 rel">
				
				<view class="flex">
					<view class="item-img rel mr-md">
						<image mode="aspectFill" lazy-load class="item-img radius"
							src="https://text.10-yuan.com/attachment/image/666/23/06/3a5516524b664d09ba4c3feb4a85fea2.jpg">
						</image>
						
					</view>
					
					<view class="flex-column">
						
						<view class="fill-base f-paragraph c-paragraph pt-md">{{detail.title}}</view>
						
						<i class="iconfont iconjuli" :style="{color:primaryColor}"></i>
						
					</view>
					
				</view>
				
				
			</view>
			
			<view class="fill-base f-title c-title pb-lg">{{detail.title}}</view>
			
			<view class="fill-base msg" style="margin-bottom: 0rpx;">
				<view class="fill-base f-paragraph c-paragraph" style="width: 100%;">
				1.平台搭建自由，自主，自愿的良好交友生态，进行资源对接，知识付费学习。任何个人私下与商业的合作与平台无关，平台也无权干涉。<br/>
				2.如果不同意电话联系开放对接，用户可以关闭此项功能，平台如有人联系您，24小时内您未回复，系统将默认您同意联系对接！<br/>
				3.此项电话联系功能多为自己储备资源，以备有事之需，多认名人朋友，自己多一次成功的机会。    送祝福。
				{{}}</view>
			</view>
			
			<view style="width: 100rpx; height: 100rpx;">
				<image class="radius-10"
					src="https://text.10-yuan.com/attachment/image/666/23/06/3a5516524b664d09ba4c3feb4a85fea2.jpg">
				</image>
			</view>
						
			
			
		</view>
		
		<!-- <view class="space-md" style="margin-bottom: 300rpx;"></view> -->

		<!-- <view class="space-max-footer"></view>
		<fix-bottom-button @confirm="$util.goUrl({url:`/user/pages/choose-technician?id=${options.id}`})"
			:text="[{type:'confirm',text:'立即报名'}]" bgColor="#fff">
		</fix-bottom-button> -->

	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';
	import parser from "@/components/jyf-Parser/index"
	export default {
		components: {
			parser
		},
		data() {
			return {
				options: {},
				activeIndex: 0,
				tabList: [{
					title: '项目介绍',
					id: 0
				}, {
					title: '禁忌说明',
					id: 1,
				}, {
					title: '下单须知',
					id: 2
				}],
				rule: {
					0: 'introduce',
					1: 'explain',
					2: 'notice'
				},
				detail: {},
				coinChangeindex: 1,
				typeList: [
					{
						title: "免费活动",
						url: "https://text.10-yuan.com/attachment/image/666/23/06/6837c876753f49c695154234caa31352.jpg"
					},
					{
						title: "其他活动",
						url: "https://text.10-yuan.com/attachment/image/666/23/06/6837c876753f49c695154234caa31352.jpg"
					}
				],
				coins: [
					{
						title: "免费",
						url: "https://text.10-yuan.com/attachment/image/666/23/06/6837c876753f49c695154234caa31352.jpg"
					},
					{
						title: "￥9.9",
						url: "https://text.10-yuan.com/attachment/image/666/23/06/6837c876753f49c695154234caa31352.jpg"
					},
					{
						title: "￥29.9",
						url: "https://text.10-yuan.com/attachment/image/666/23/06/6837c876753f49c695154234caa31352.jpg"
					},
					{
						title: "￥99.9",
						url: "https://text.10-yuan.com/attachment/image/666/23/06/6837c876753f49c695154234caa31352.jpg"
					},
					{
						title: "￥199",
						url: "https://text.10-yuan.com/attachment/image/666/23/06/6837c876753f49c695154234caa31352.jpg"
					}
				],
				imagelist: ['https://card-1253902191.cos.ap-chengdu.myqcloud.com/image/666/22/09/709c5224a2a54ba0b4857779206b2118.MOV']
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
		}),
		onLoad(options) {
			this.$util.showLoading()
			this.options = options
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onShareAppMessage(e) {
			let {
				id: pid
			} = this.userInfo
			let {
				id,
				title,
				cover: imageUrl
			} = this.detail
			let path = `/user/pages/detail?pid=${pid}&id=${id}`
			this.$util.log(path)
			return {
				title,
				imageUrl,
				path,
			}
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo']),
			...mapMutations(['getUserIndex']),
			async initIndex(refresh = false) {
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.toAppShare()
				}
				// #endif
				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
				}
				await this.getDetail()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			initRefresh() {
				this.initIndex(true)
			},
			toAppShare() {
				let {
					id: pid
				} = this.userInfo
				let {
					id,
					title,
					cover: imageUrl
				} = this.detail
				let summary = ''

				// #ifdef H5
				let page_url = window.location.href
				if (page_url.includes('&pid=')) {
					page_url = page_url.split('&pid=')[0]
				}
				let href = `${page_url}&pid=${pid}`
				this.$jweixin.wxReady(() => {
					this.$jweixin.showOptionMenu()
					this.$jweixin.shareAppMessage(title, summary, href, imageUrl)
					this.$jweixin.shareTimelineMessage(title, href, imageUrl)
				})
				// #endif
				// #ifdef APP-PLUS
				let {
					siteroot
				} = siteInfo
				let url = siteroot.split('/index.php')[0]
				let href = `${url}/h5/#/user/pages/detail?id=${id}&pid=${pid}`
				uni.share({
					provider: "weixin",
					scene: 'WXSceneSession',
					type: 0,
					href,
					title,
					summary,
					imageUrl,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
				// #endif
			},
			async getDetail() {
				let {
					id
				} = this.options
				this.detail = await this.$api.service.serviceInfo({
					id
				});
				this.$util.hideAll()
			},
			handerTabChange(index) {
				this.activeIndex = index;
			},
			linkpress(res) {
				console.log("linkpress", res);
				// #ifdef APP-PLUS
				this.$util.goUrl({
					url: res.href,
					openType: 'web'
				})
				// #endif
			},
			sign(){
				
			},
		}
	}
</script>


<style lang="scss">
	.pages-home {
		background-color: #fff;
		.item-btn {
			height: 54rpx;
			padding-left: 15rpx;
			padding-right: 15rpx;
		}
		.total-box {
			width: 100%;
			height: 84rpx;
			background-color: #fff;
			.box-btn {
				margin: 0;
				padding: 0;
				margin-right: 2rpx;
				height: 62rpx;
				display: flex;
				align-items: center;
				background-color: #e4e4e4;
				border-radius: 42rpx;
				line-height: 1.5;
				border-color: #000;
				border-width: 2rpx;
				text-align: left;
				color: #333;
			}
			.box-btn2 {
				margin: 0;
				padding: 0;
				margin-right: 2rpx;
				height: 62rpx;
				display: flex;
				align-items: center;
				background-color: #bccfde;
				border-radius: 42rpx;
				line-height: 1.5;
				border-color: #000;
				border-width: 2rpx;
				text-align: left;
				color: #333;
			}
		}
	
		.user-item {
			background-color: #fff;
			float: left;
			box-sizing: border-box;
			width: 44%;
			text-align: center;
			height: 100rpx;
			// padding: 10px 6px;
			
			.cover {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50rpx;
			}
		}
		
		.user-list {
			background-color: #fff;
			float: left;
			box-sizing: border-box;
			width: 100%;
			text-align: center;
			height: 100rpx;
			// padding: 10px 6px;
			
			.cover {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50rpx;
			}
		}
		
		.msg {
			background-color: #fff;
			float: left;
			box-sizing: border-box;
			width: 100%;
			padding-bottom: 120rpx;
		}
		
		.list-item3 {
			.top-tag {
				width: 40rpx;
				height: 30rpx;
				color: #B75E1D;
				background: linear-gradient(90deg, #DFB885 0%, #FCE0AD 100%);
				border-radius: 8rpx 0 8rpx 0;
				top: 0;
				left: 0;
			}
		
			.item-img {
				width: 124rpx;
				height: 124rpx;
			}
			
			.item-img-big {
				width: 224rpx;
				height: 224rpx;
			}
		
			.image-bg {
				width: 55rpx;
				height: 55rpx;
				font-weight: 600;
				padding-top: 0rpx;
				text-align: center;
				background-position: center;
				background-size:cover;
				background-repeat: no-repeat;
				background-image: url("/static/common/avoid.png");
			}
		
			.top-img {
				width: 146rpx;
				height: 140rpx;
				top: -7rpx;
				left: -11rpx;
			}
		
			.hot-img {
				width: 75rpx;
				height: 51rpx;
				top: 77rpx;
				left: 25rpx;
			}
		
			.new-img {
				width: 38rpx;
				height: 52rpx;
				top: 83rpx;
				left: 78rpx;
			}
		
			.item-tag {
				width: 100rpx;
				height: 32rpx;
				color: #000;
				background: rgba(216, 216, 216, 0.3);
				margin-top: 19rpx;
				margin-bottom: 6rpx;
			}
		
			.item-tag.can-service {
				color: #EBDDB1;
				background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
			}
		
			.more-img {
				width: 104rpx;
				height: 33rpx;
				border-radius: 3px;
				transform: rotateZ(360deg);
			}
		
			.can-service-btn {
				width: 64rpx;
				height: 28rpx;
				margin-left: 8rpx;
		
				.bg {
					width: 64rpx;
					height: 28rpx;
					opacity: 0.1;
					border-radius: 3rpx;
					top: 0;
					left: 0;
					z-index: 1;
				}
		
				.text {
					width: 64rpx;
					height: 28rpx;
					top: 0;
					left: 0;
					z-index: 2
				}
			}
		
			.iconyduixingxingshixin {
				font-size: 28rpx;
				background-image: -webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%);
			}
		
			.star-text {
				color: #FF9519;
				margin-left: 6rpx;
			}
		
			.order-num {
				color: #4D4D4D;
				margin-left: 16rpx;
			}
		
			.item-btn {
				width: 130rpx;
				height: 52rpx;
				border-radius: 8rpx;
			}
		}
	
	
	}
</style>
